<template>
  <div>{{ num }}</div>
  <button @click="num++">点我自增</button>
  <button @click="add">点我自增</button>
</template>
<script>
// reactive函数（只能定义复杂数据类型）  reactive({num:0})，ref函数(所有数据都可定义)
// ref:可以获取dom,可以获取组件实例对象，可以定义响应式数据
/*
ref函数可以定义响应式数据
使用步骤
1：导入  import {ref} from 'vue'
2:在setup中定义
  setup(){
   const state=ref(0/{}/[])
   访问：
      state=ref(0)  {value:0}
      state.vaue=0
      obj=ref({a:10})   obj={value:{a:10}}
      obj.value.a
    js中使用value一定要加上，但是在template中使用不用加
  }
*/

import { ref } from 'vue'
export default {
  setup () {
    const num = ref(0)
    const add = () => {
      num.value++
    }
    return { num, add }
  }
}
</script>
<style></style>
